<template>
  <div class="order-view">
    <el-dialog
      title="销售退货订单 - 详情"
      :visible.sync="dialogVisible"
      v-if="dialogVisible"
      width="60%"
      :before-close="handleClose"
      :modal-append-to-body="false"
      :append-to-body="true"
    >
      <template>
        <div>
          <el-descriptions title="销售退货订单">
            <el-descriptions-item label="销售退货订单编号">{{
                tabData.saleBackCode
              }}
            </el-descriptions-item>
            <el-descriptions-item label="销售退货申请编号">{{
                tabData.saleBackRequestCode
              }}
            </el-descriptions-item>
            <el-descriptions-item label="单据日期">{{
                tabData.createDate
              }}
            </el-descriptions-item>
            <el-descriptions-item label="总价">{{
                tabData.total
              }}
            </el-descriptions-item>
            <el-descriptions-item label="需付款比率">{{
                tabData.payCent * 100 + "%"
              }}
            </el-descriptions-item>
            <el-descriptions-item label="需付款金额">{{
                tabData.realMoney
              }}
            </el-descriptions-item>
            <el-descriptions-item label="实付金额">{{
                tabData.payMoney
              }}
            </el-descriptions-item>
            <el-descriptions-item label="总数量">{{
                tabData.totalNum
              }}
            </el-descriptions-item>
            <el-descriptions-item label="已入库数量">{{
                tabData.inNum
              }}
            </el-descriptions-item>
            <el-descriptions-item label="不合格数量">{{
                tabData.noPssNum
              }}
            </el-descriptions-item>
            <el-descriptions-item label="入库状态">{{
                tabData.stockStatus == 0 ? "待入库" : tabData.stockStatus == 1 ? "部分入库" : "完全入库"
              }}
            </el-descriptions-item>
            <el-descriptions-item label="付款状态">{{
                tabData.payStatus == 0 ? "待付款" : tabData.payStatus == 1 ? "部分付款" : "完全付款"
              }}
            </el-descriptions-item>
            <el-descriptions-item label="质检状态">{{
                tabData.qualitiedStatus == 0 ? "等待质检" : tabData.qualitiedStatus == 1 ? "部分质检" : "完全质检"
              }}
            </el-descriptions-item>
            <el-descriptions-item label="审核人">{{
                tabData.passUser
              }}
            </el-descriptions-item>
            <el-descriptions-item label="审核状态">{{
                tabData.status == 0 ? "待审核" : tabData.status == 1 ? "审核通过" : "已驳回"
              }}
            </el-descriptions-item>
            <el-descriptions-item label="生效时间">{{
                tabData.passDate
              }}
            </el-descriptions-item>
            <el-descriptions-item label="是否关闭">{{
                tabData.isClose == 0 ? "否" : "是"
              }}
            </el-descriptions-item>
            <el-descriptions-item label="是否作废">{{
                tabData.isCancel == 0 ? "否" : "是"
              }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <el-table :data="saleBackDetailList" style="width: 100%">
          <el-table-column label="序号" align="center">
            <template slot-scope="scope">
              {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="商品编号" align="center" prop="proCode"/>
          <el-table-column label="商品名称" align="center" prop="proName"/>
          <el-table-column label="数量" align="center" prop="proNum"/>
          <el-table-column label="出售单价" align="center" prop="price"/>
          <el-table-column label="小计" align="center">
            <template slot-scope="scope">
              {{ (scope.row.proNum * scope.row.price).toFixed(2) }}
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "SaleBackView",
  props: ["viewData"],
  data() {
    return {
      tabData: this.viewData,
      dialogVisible: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      saleBackDetailList: [],
    };
  },
  watch: {
    viewData() {
      this.tabData = this.viewData;
      this.getList()
    }
  },

  methods: {
    handleClose(done) {
      done();
    },
    showView() {
      this.dialogVisible = true;
    },
    getList() {
      this.queryParams.saleBackCode = this.tabData.saleBackCode;
      request({
        url: '/xiaoshou/saleBackDetail/list',
        method: 'get',
        params: this.queryParams
      }).then(res => {
        this.saleBackDetailList = res.rows;
        this.total = res.total;
      });
    }
  },
};
</script>
